<template>
  <div class="deliverList">
    <!-- 头部区域 --> 
     <el-card class="operate-top-card" >  <!-- shadow="never" -->
        <i class="el-icon-s-order" style="font-size:18px;margin-right:3px"></i>
        <span>发货列表</span> 
      </el-card>

       <!-- 内容区域 -->
     <el-card class="table-container">
          <el-table 
           :data="listData" 
            border   
            v-loading="listLoading"
            style="width: 100%" >
           
            <el-table-column  prop="orderSn"  align="center"  label="订单编号"  width="120">  </el-table-column>
            <el-table-column  prop="receiverName"  align="center"  label="收货人"  width="120">  </el-table-column>
            <el-table-column  prop="receiverPhone"  align="center"  label="手机号码"  width="120">  </el-table-column>
            <el-table-column  prop="receiverPostCode"  align="center"  label="邮政编码"  width="120">  </el-table-column>
            <el-table-column  prop="receiverDetailAddress"  align="center"  label="收货地址" >  </el-table-column>
            <el-table-column   align="center"  label="配送方式"  width="200"> 
              
              <template slot-scope="scope">
                  <el-select  placeholder="请选择物流公司" v-model="scope.row.deliveryCompany">
                      <el-option v-for="item in deliveryCompanyOptions" 
                          :key="item"
                          :label="item" 
                          :value="item"
                          >
                      </el-option>  
                  </el-select>
              </template>

            </el-table-column>
            
            <el-table-column   align="center"  label="物流单号"  > 
                <template slot-scope="scope">
                  <el-input size="smll" v-model="scope.row.deliverySn" placeholder="请输入物流单号"></el-input>
                </template>
            </el-table-column>
               
          </el-table>
 
          <div style="text-align:center;margin-top:50px;">
            <el-button  @click="cancel"  >取消</el-button>
            <el-button  type="primary"  @click="confrim">确定</el-button>
          </div>
 
     </el-card>
     
  </div>
</template>

<script>
  import { deliveryOrder } from '@/api/orderApi'
export default {
  name: 'deliverList',
  data(){
    return {
      deliveryCompanyOptions:[
        '顺丰快递','申通快递','中通快递','韵达快递'
      ],
      listData:[],
      listLoading:false
    }
  },
  created(){
  
    this.listData = this.$route.query.listData
  },
  methods:{
    cancel(){
      this.$router.back()
    },
    confrim(){
      this.$confirm('确定要发货吗?','提示',{
          type:'warning'
        }).then(() =>{ 
          // 物流发货
          deliveryOrder({orderList:this.listData}).then(res=>{
            if(res.status === 1){
              this.$message.success(res.msg) 
              this.$router.back()
            }else{
              this.$message.error(res.msg)
            } 
          }) 
        }).catch(err=>{
          this.$message.info('已取消发货')
      })
    }
  }
}
</script>
